import React from 'react'

import { Row, Col } from 'antd';

interface P {
  data: Array<{
    name: string;
    value: number;
  }>;
  src: string
}

const Item = ({ data, src }: P) => (
  <Row style={{ height: '100%' }}>
    <Col span={12} style={{ height: '100%' }}>
      <Row style={{ height: '100%', flexDirection: 'column' }} type='flex' justify="center">
        <Col span={24} style={{display: 'flex', justifyContent: 'center'}}><img src={src} width="80" height="80"/></Col>
      </Row>
    </Col>
    <Col span={12} style={{ height: '100%' }}>
      <Row style={{ height: '100%', padding: '25% 0', flexDirection: 'column' }} type='flex' justify="space-around">
        {
          Array.isArray(data) && data.map((v, index) => (
            <Col key={index} span={24} style={{ fontSize: '16px', fontWeight: 400, color: 'rgba(0, 0, 0, 0.85)' }}>
              {v.name}：<span>{v.value}</span>
            </Col>
          ))
        }
      </Row>
    </Col>
  </Row>
)


export default Item;